<template>
  <div class="wrapper">
    <common-scroll :data="searchResult" ref="scroll" class="scroll">
        <div class="container">
            <ul class="shop-list" v-if="searchResult.length > 0">
              <li class="shop-item" v-for="item of searchResult" :key="item.id" @click="handleDetail(item)">
                <common-product :shopInfo="item" border-bottom-1px></common-product>
              </li>
            </ul>
        </div>
    </common-scroll>
  </div>
</template>

<script>
import CommonScroll from 'common/scroll/Scroll'
import CommonProduct from 'common/product/Product'
import { mapState } from 'vuex'
export default {
  name: 'ResultRecommend',
  components: {
    CommonScroll,
    CommonProduct
  },
  computed: {
    ...mapState(['searchResult'])
  },
  methods: {
    handleDetail (item) {
      this.$router.push({
        path: `/detail/${item.id}`
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
.wrapper
  .scroll
    top 190px
.shop-list
    .item
      padding-top 24px
      box-sizing border-box
</style>
